<template>
  <div>
    <el-drawer
      class="pre-drawer"
      :visible.sync="visible"
      direction="rtl"
      destroy-on-close
      :before-close="handleClose"
    >
      <div slot="title" class="tab-list">
        <div
          v-for="(item, index) in tablist"
          :key="index"
          :class="{ active: item.value == active }"
          @click="active = item.value"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="content">
        <div class="content-item">订单编号: {{ model.ddbh }}</div>
        <div class="content-item">{{ model.ddlx }} {{ model.zl }}吨</div>
        <div style="color:#182236">品种： {{ model.pz }}</div>
        <template v-if="active == '2'">
          <div class="pre-drawer-btn">
            <el-button type="primary" size="small">增加计划</el-button>
            <el-button size="small" @click="cancelPlan">取消计划</el-button>
          </div>
          <div style="margin:20px 0 35px">
            <el-row class="progress-text" type="flex" justify="space-between">
              <div>项目总进度</div>
              <div style="color: #48556A;">
                100%
              </div>
            </el-row>
            <el-progress
              color="#2C67f6"
              :stroke-width="12"
              :text-inside="true"
              :percentage="50"
            ></el-progress>
          </div>
          <div class="time">
            <div style="margin-bottom:8px">
              下单时间：<span style="margin-left:90px"
                >预计完成时间：{{ model.end_time }}</span
              >
            </div>
            <div>订单交期要求：{{ model.ddjq }}</div>
          </div>
          <div class="plan" v-for="i in 3" :key="i">
            <div class="sub-title">2021/10/16</div>
            <el-row type="flex" align="middle">
              <el-col :span="6">计划产量(T/日): {{ model.jhcl }}</el-col>
              <el-col :span="6">实际产量(T/日): 暂无</el-col>
              <el-col :span="9" :offset="1">
                <el-progress
                  color="#2C67f6"
                  :show-text="false"
                  :percentage="80"
                  style="padding-right:10px;"
                ></el-progress>
              </el-col>
              <el-col :span="2">
                <span style="color:#182236;font-size:13px;font-weight:600"
                  >80</span
                >/100%
              </el-col>
            </el-row>
          </div>
        </template>
        <template v-else>
          <el-descriptions class="order-des" title="订单信息" :column="2">
            <el-descriptions-item label="车间/楼层"
              >{{ model.cj }}
            </el-descriptions-item>
            <el-descriptions-item label="支别">{{
              model.zb
            }}</el-descriptions-item>
            <el-descriptions-item label="计划开台">{{
              model.jhkt
            }}</el-descriptions-item>
            <el-descriptions-item label="计划停台"
              >{{ model.jhtt }}
            </el-descriptions-item>
            <el-descriptions-item label="计划产量(T/日)">{{
              model.jhcl
            }}</el-descriptions-item>
            <el-descriptions-item label="计划台产量(KG/日)">{{
              model.jhtc
            }}</el-descriptions-item>
            <el-descriptions-item label="理论产量(T/日)">{{
              model.llcl
            }}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{
              model.end_time
            }}</el-descriptions-item>
          </el-descriptions>
          <pz-table></pz-table>
          <div style="font-weight:bold;font-size:14px;margin:25px 0 12px">
            订单记录
          </div>
          <div class="pre-order-table">
            <el-table
              :data="orderTable"
              border
              size="small"
              header-cell-class-name="pzHeader"
            >
              <el-table-column
                label="下单时间"
                align="center"
                min-width="25%"
              ></el-table-column>
              <el-table-column
                label="增加订单(吨)"
                align="center"
                min-width="25%"
              ></el-table-column>
              <el-table-column
                label="订单交期要求"
                align="center"
                min-width="25%"
              ></el-table-column>
              <el-table-column
                label="订单状态"
                align="center"
                prop="status"
                min-width="25%"
              ></el-table-column>
            </el-table>
          </div>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import pzTable from './pzTable.vue';
import { cancelPrePlan } from '@/api/productionPlan';
export default {
  components: { pzTable },
  data() {
    return {
      visible: false,
      active: '1',
      model: {},
      tablist: [
        { name: '计划详情', value: '1' },
        { name: '完成进度详情', value: '2' }
      ],
      orderTable: [
        { status: 'fad' },
        { status: 'fad' },
        { status: 'fad' },
        { status: 'fad' }
      ]
    };
  },
  methods: {
    edit(record) {
      console.log(record);
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    async cancelPlan() {
      const res = await cancelPrePlan({ ddbh: this.model.ddbh });
      if (res.code == 1) {
        this.$message.success('取消预排计划成功');
        this.handleClose();
      }
    },
    handleClose() {
      this.active = '1';
      this.visible = false;
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss">
.order-des {
  .el-descriptions__header {
    margin: 20px 0 10px 0;
  }
  .el-descriptions__title {
    font-size: 14px;
  }
}
.pre-order-table .el-table {
  border-color: #cfd4d8;
  .pzHeader {
    background: #f2f5f8 !important;
    .cell {
      color: #48556a;
      font-weight: 400;
    }
    &.nopadding {
      padding: 0;
    }
  }

  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-color: #cfd4d8;
  }
  tbody .el-table__row:last-child td.el-table__cell {
    border-bottom: none;
  }
}
.pre-order-table {
  .el-table::before,
  .el-table--group::after,
  .el-table--border::after {
    background-color: #cfd4d8;
  }
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #cfd4d8;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #cfd4d8;
  }
}
</style>
